<template>
  <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
    <n-grid-item span="0:24 640:24 1024:6">
      <n-card :bordered="false" class="rounded-8px shadow-sm">
        <div class="w-full h-360px py-12px flex">
          <div class="left-content flex-1">
            <h3 class="text-16px font-bold">数据展板</h3>
            <div class="flex">
              <div class="flex-1">
                <h3 class="pt-32px text-24px font-bold">
                  <count-to prefix="￥" :start-value="0" :end-value="0" />
                </h3>
                <p class="text-#aaa">总收入</p>
                <h3 class="pt-32px text-24px font-bold">
                  <count-to :start-value="0" :end-value="0" />
                </h3>
                <p class="text-#aaa">本日单量</p>
                <h3 class="pt-32px text-24px font-bold">
                  <count-to :start-value="0" :end-value="0" />
                </h3>
                <p class="text-#aaa">本月单量</p>
              </div>
              <div class="flex-1">
                <h3 class="pt-32px text-24px font-bold">
                  <count-to class="text-#f32d48" :start-value="0" suffix="%" :end-value="0" />
                </h3>
                <p class="text-#aaa">投诉率</p>
                <h3 class="pt-32px text-24px font-bold">
                  <count-to :start-value="0" suffix="%" :end-value="0" />
                </h3>
                <p class="text-#aaa">售后率</p>
                <h3 class="pt-32px text-24px font-bold">
                  <count-to class="text-#f32d48" :start-value="0" suffix="%" :end-value="0" />
                </h3>
                <p class="text-#aaa">流标率</p>
              </div>
            </div>
          </div>
          <div class="right-content flex-1">
            <div>
              <n-switch :rail-style="railStyle">
                <template #checked>傍晚六点下班</template>
                <template #unchecked>午夜零点下班</template>
              </n-switch>
              <p class="text-#aaa pt-32px">
                亲爱的设计师，开启按钮即表示可接单，开启接单按钮，方便发单员直接指定订单或自动分单，不接单时请记得关闭按钮，如30分钟在平台未进行操作，系统自动关闭按钮
              </p>
            </div>
          </div>
        </div>
      </n-card>
    </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:10">
      <n-card :bordered="false" class="rounded-8px shadow-sm">
        <div ref="lineRef" class="w-full h-360px"></div>
      </n-card>
    </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:8">
      <n-card :bordered="false" class="rounded-8px shadow-sm">
        <div ref="pieRef" class="w-full h-360px"></div>
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { CSSProperties, Ref } from 'vue';
import { type ECOption, useEcharts } from '@/composables';

defineOptions({ name: 'DashboardAnalysisTopCard' });

const railStyle = ({ focused, checked }: { focused: boolean; checked: boolean }) => {
  const style: CSSProperties = {};
  if (checked) {
    style.background = '#d03050';
    if (focused) {
      style.boxShadow = '0 0 0 2px #d0305040';
    }
  } else {
    style.background = '#2080f0';
    if (focused) {
      style.boxShadow = '0 0 0 2px #2080f040';
    }
  }
  return style;
};

const lineOptions = ref<ECOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    // data: ['本日单量', '注册数']
    data: ['本日单量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      color: '#8e9dff',
      name: '本日单量',
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#8e9dff'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
    }
    // {
    //   color: '#26deca',
    //   name: '注册数',
    //   type: 'line',
    //   smooth: true,
    //   stack: 'Total',
    //   areaStyle: {
    //     color: {
    //       type: 'linear',
    //       x: 0,
    //       y: 0,
    //       x2: 0,
    //       y2: 1,
    //       colorStops: [
    //         {
    //           offset: 0.25,
    //           color: '#26deca'
    //         },
    //         {
    //           offset: 1,
    //           color: '#fff'
    //         }
    //       ]
    //     }
    //   },
    //   emphasis: {
    //     focus: 'series'
    //   },
    //   data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
    // }
  ]
}) as Ref<ECOption>;
const { domRef: lineRef } = useEcharts(lineOptions);

const pieOptions = ref<ECOption>({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '1%',
    left: 'center',
    itemStyle: {
      borderWidth: 0
    }
  },
  series: [
    {
      color: ['#5da8ff', '#8e9dff', '#fedc69', '#550001'],
      name: '访问来源',
      type: 'pie',
      radius: ['45%', '75%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '12'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 0, name: '进行中' },
        { value: 0, name: '审核中' },
        { value: 0, name: '中标' },
        { value: 0, name: '流标' }
      ]
    }
  ]
}) as Ref<ECOption>;
const { domRef: pieRef } = useEcharts(pieOptions);
</script>

<style scoped></style>
